<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
              v-model="searchQuery.beginSearchTime"
              format="yyyy-MM-dd HH:mm"
              placeholder="开始时间" type="datetime"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchQuery.endSearchTime"
              format="yyyy-MM-dd HH:mm"
              placeholder="结束时间" type="datetime"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-select v-model="searchQuery.siteId" placeholder="提车网点" clearable filterable>-->
          <!--              <el-option v-for="item in siteArray" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <el-button plain size="small" type="primary" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
      <div class="op">
        <el-button :disabled="additional" size="mini" @click="addFee">额外费用</el-button>
      </div>
    </div>
    <div class="box-style">
      <div class="top">
        <ad-table
          v-loading="waitInitLoading"
          :data="waitList" :data-changes-scroll-top="waitIsScrollTop"
          :height="drawer === true ? tableHeight-300 :tableHeight"
          :searchQuery="waitSearchQuery"
          u-table
          @search="waitGetInitList" @sort-change="waitSortInitList" @table-body-scroll="waitGetMoreList"
          @filter-change="waitFilterInitList" @cell-click="cellClick">
          <ad-table-column ctype="index" fixed label="序号" type="index"/>
          <ad-table-column label="制单人" prop="orderCreateUserName" searchable sortable w="3c2f"/>
          <ad-table-column ctype="datetime" label="制单时间" prop="orderCreateTime" sortable width="130"/>
          <ad-table-column ctype="orderNo" label="订单号" prop="orderSubNo" searchable sortable>
            <!--                                                <template slot-scope="scope">-->
            <!--                                                  {{scope.row.orderSubNo}}<span v-if="scope.row.hasUrgent == 1" class="icon-urgent">急</span>-->
            <!--                                                </template>-->
            <!--            <template slot-scope="{row}">-->
            <!--              <slot :row="row" v-if="row.hasUrgent == 1">-->
            <!--                {{row.orderSubNo}}<span class="icon-urgent">急</span>-->
            <!--              </slot>-->
            <!--              <slot :row="row" v-else>{{row.orderSubNo}}</slot>-->
            <!--            </template>-->
          </ad-table-column>
          <ad-table-column dictName="pickcar_status" filterable label="指派状态" prop="pickCarStatus" w="4c2f">
            <template slot-scope="{row}">
              <slot v-if="row.pickCarStatus == 1 || row.pickCarStatus == 2" :row="row">
                <div class="tdFloat">
                  <span class="el-link--inner">{{ parseStatus(dict, 'pickcar_status', row.pickCarStatus) }}</span>
                  <i v-show="row.isAdd" class="el-icon-check"></i></div>
              </slot>
              <slot v-else-if="row.pickCarStatus == 4" :row="row">
                <div class="tdFloat">
                  <span class="el-link--inner">{{ parseStatus(dict, 'pickcar_status', row.pickCarStatus) }}</span></div>
              </slot>
              <slot v-else :row="row">{{ parseStatus(dict, 'pickcar_status', row.pickCarStatus) }}</slot>
            </template>
          </ad-table-column>
<!--          <ad-table-column dictName="pick_driver_status" filterable label="司机状态" prop="driverStatus" w="4c2f">-->
<!--            <template slot-scope="{row}">-->
<!--              <slot v-if="row.driverStatus == 1" :row="row">-->
<!--                <div class="tdFloat">-->
<!--                  <span class="el-link&#45;&#45;inner">{{-->
<!--                      parseStatus(dict,-->
<!--                        'pick_driver_status', row.driverStatus)-->
<!--                    }}-->
<!--                  </span></div>-->
<!--              </slot>-->
<!--              <slot v-else :row="row">{{ parseStatus(dict, 'pick_driver_status', row.driverStatus) }}</slot>-->
<!--            </template>-->
<!--          </ad-table-column>-->
          <ad-table-column dictName="verifycar_status" filterable label="验车状态" prop="verifyCarStatus" w="4c2f">
            <template slot-scope="{row}">
              <slot v-if="row.verifyCarStatus == 2" :row="row">
                <div class="tdFloat">
                  <span class="el-link--inner">{{ parseStatus(dict, 'verifycar_status', row.verifyCarStatus) }}</span>
                </div>
              </slot>
              <slot v-else :row="row">{{ parseStatus(dict, 'verifycar_status', row.verifyCarStatus) }}</slot>
            </template>
          </ad-table-column>
          <ad-table-column dictName="pick_stock_status" filterable label="入库状态" prop="stockStatus" w="4c2f">
            <template slot-scope="{row}">
              <slot v-if="row.stockStatus == 1" :row="row">
                <div class="tdFloat">
                  <span class="el-link--inner">{{ parseStatus(dict, 'pick_stock_status', row.stockStatus) }}</span>
                </div>
              </slot>
              <slot v-else :row="row">{{ parseStatus(dict, 'pick_stock_status', row.stockStatus) }}</slot>
            </template>
          </ad-table-column>
          <ad-table-column :filters="startCodeArr" column-key="startCodes" ctype="city" label="出发地" prop="startCode"
                           queryPro="startName"
                           sortable/>
          <ad-table-column :filters="destinationCodeArr" column-key="destinationCodes" ctype="city" label="目的地" prop="destinationCode"
                           queryPro="destinationName"
                           sortable/>
          <ad-table-column label="车辆名称" prop="carName" searchable w="4c2f"/>
          <ad-table-column ctype="vin-2f" label="车架号" prop="vin" searchable/>
          <ad-table-column label="联系人" prop="linkmanName" searchable w="3c2f"/>
          <ad-table-column ctype="phone-2f" label="联系电话" prop="linkmanPhone" searchable/>
          <ad-table-column ctype="datetime" label="预约提车时间" prop="appointPickTime" sortable width="130"/>
          <ad-table-column label="提车指派人" prop="pickUserName" searchable w="5c2f"/>
          <ad-table-column ctype="address-2f" label="提车地址" prop="pickAddress" searchable/>
          <ad-table-column dictName="pickcar_type" filterable label="提车方式" prop="pickType" w="4c2f"/>
          <ad-table-column dictName="transport_way" filterable label="运输方式" prop="transportType" w="4c1f"/>
          <ad-table-column label="结算人" prop="settlementName" searchable w="3c2f"/>
          <ad-table-column dictName="settlement_type" filterable label="结算方式" prop="settlementType" w="4c2f"/>
          <ad-table-column ctype="phone-2f" label="结算电话" prop="settlementPhone" searchable/>
          <ad-table-column label="提车司机" prop="driverName" searchable w="4c2f"/>
          <ad-table-column ctype="phone-2f" label="司机电话" prop="driverPhone" searchable/>
          <ad-table-column label="提车费" prop="pickCarFee" searchable w="3c2f"/>
          <ad-table-column ctype="remark" label="订单备注" prop="orderRemark"/>
        </ad-table>
      </div>

      <!--      底部弹出框-->
      <!--      <el-drawer-->
      <!--        :visible.sync="drawer"-->
      <!--        direction="btt"-->
      <!--        :with-header="false">-->
      <div v-if="drawer" id="bottom" class="bottom" style="min-height: 290px">
        <div v-if="bottomTableData.length==0&&!isInspect" class="title-bar" style="height:36px;">
          <el-button plain size="mini" style="position: absolute;right: 20px" type="info" @click="drawer = false">取消
          </el-button>
        </div>
        <div v-if="bottomTableData.length==0&&!isInspect"
             style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
          <div style="height:44px;">
            <img :src="noData"/>
          </div>
          暂无内容
        </div>
        <!--        提车指派-->
        <div v-else-if="bottomTableData.length>0">
          <div class="title-bar">
            <h2>提车指派</h2>
            <div class="op">
              <el-button plain size="mini" type="info" @click="drawer = false">取消</el-button>
              <el-button plain size="mini" type="primary" @click="save">保存</el-button>
            </div>
          </div>
          <div class="content">
            <div class="left" style="min-width: 340px">
              <div class="form-wrapper assign">
                <h3>结算信息</h3>
                <div class="form-content">
                  <el-form ref="saveForm" :model="saveForm" :rules="rules" inline label-position="right"
                           label-width="auto" size="mini">
                    <el-row>
                      <el-col>
                        <el-form-item label="公司名称：" prop="company">
                          <el-input v-model="saveForm.company" :disabled="dialogSettlerVisible" placeholder="必选"
                                    @focus="showGetList"/>
                          <!--                          <ad-suggestion  v-model="saveForm.company" defaultProp="company" type="table"-->
                          <!--                                         @select="selectLink" @clear="removeLink"-->
                          <!--                                         :api="{method: getSuggestCompanyList, query: 'companyName'}"-->
                          <!--                                         :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>-->
                        </el-form-item>

                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-form-item label="结算人：" prop="settlementName">
                          <el-input v-model="saveForm.settlementName" :disabled="dialogSettlerVisible"
                                    placeholder="必选"
                                    @focus="showGetList"/>
                          <!--                          <ad-suggestion v-model="saveForm.settlementName"-->
                          <!--                                         defaultProp="settlementName" type="table"-->
                          <!--                                         @select="selectLink" @clear="removeLink"-->
                          <!--                                         :api="{method: getSuggestCompanyList, query: 'linkmanName'}"-->
                          <!--                                         :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>-->

                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col>
                        <el-form-item label="联系电话：" prop="settlementPhone">
                          <el-input v-model="saveForm.settlementPhone" :disabled="dialogSettlerVisible"
                                    placeholder="必选"
                                    @focus="showGetList"/>
                          <!--                          <ad-suggestion v-model="saveForm.settlementPhone"-->
                          <!--                                         defaultProp="settlementPhone" type="table"-->
                          <!--                                         @select="selectLink" @clear="removeLink"-->
                          <!--                                         :api="{method: getSuggestCompanyList, query: 'linkmanPhone', startQueryCount: 4}"-->
                          <!--                                         :options="[{label: '联系电话', prop: 'linkmanPhone'},{label: '结算人', prop: 'linkmanName'},{label: '公司名称', prop: 'companyName'}]"/>-->
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row :gutter="5">
                      <el-col :span="11">
                        <el-form-item label="结算金额：" prop="pickCarFee">
                          <!--                          <el-input v-model="saveForm.pickCarFee" disabled/>-->
                          <span v-if="saveForm.pickCarFee"
                                style="color: red;font-size: 14px">￥{{ saveForm.pickCarFee }}</span>
                          <span v-else>-</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="13">
                        <el-form-item label="结算方式：" prop="settlementType">
                          <ad-status-select v-model="saveForm.settlementType" :dict="dict.settlement_type"/>

                          <!--                          <el-select v-model="saveForm.settlementType" clearable >-->
                          <!--                            <el-option v-for="type in dict['settlement_type']" :key="type.id" :label="type.label"-->
                          <!--                                       :value="type.value"/>-->
                          <!--                          </el-select>-->
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </div>
            </div>
            <div class="middle" style="width: 234px; flex-shrink: 0;height:calc(36vh - 37px)">
              <div class="form-wrapper driver">
                <h3>司机信息</h3>
                <div class="form-content">
                  <el-form inline label-position="right" label-width="auto" size="mini">
                    <el-row>
                      <el-col>
                        <el-form-item label="司机姓名：">
                          <el-input v-model="saveForm.driverName" :disabled="dialogDriverVisible"
                                    @focus="showDriverList"/>
                        </el-form-item>
                      </el-col>
                      <el-col>
                        <el-form-item label="司机电话：">
                          <el-input v-model="saveForm.driverPhone" :disabled="dialogDriverVisible"
                                    @focus="showDriverList"/>
                        </el-form-item>
                      </el-col>
                      <el-col>
                        <el-form-item label="小板车牌：">
                          <el-input v-model="saveForm.licensePlateNumber" :disabled="dialogDriverVisible"
                                    @focus="showDriverList"/>
                        </el-form-item>
                      </el-col>
                      <el-col>
                        <el-form-item label="身份证号：">
                          <el-input v-model="saveForm.driverCardNumber" :disabled="dialogDriverVisible"
                                    @focus="showDriverList"/>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </div>
            </div>
            <div class="right">
              <ad-table :data="bottomTableData" :height="bottomTabHeight" class="editTable" u-table>
                <ad-table-column v-if="!isShowDriver" :operates="operates" operation width="60"/>
                <ad-table-column ctype="orderNo" label="提车费" prop="pickCarFee" width="110">
                  <template slot-scope="{row}">
                    <slot :row="row">
                      <el-input v-model="row.pickCarFee" maxLength="5" placeholder="必填"
                                size="mini"
                                style="width: 80px"
                                @blur="clacFee()"></el-input>
                    </slot>
                  </template>
                  <!--                  <template slot-scope="scope">-->
                  <!--                    <el-input size="mini" v-model="scope.row.pickCarFee" maxLength="8"></el-input>-->
                  <!--                  </template>-->
                </ad-table-column>
                <ad-table-column label="订单号" prop="orderSubNo"/>
                <ad-table-column label="提车联系人" prop="linkmanName" w="5c"/>
                <ad-table-column ctype="phone" label="联系电话" prop="linkmanPhone"/>
                <ad-table-column ctype="city" label="出发地" prop="startCode"/>
                <ad-table-column ctype="city" label="目的地" prop="destinationCode"/>
                <ad-table-column ctype="carName" label="车辆名称" prop="carName"/>
                <ad-table-column ctype="vin" label="车架号" prop="vin"/>
                <ad-table-column dictName="pickcar_type" label="提车方式" prop="pickType" w="4c2f"/>
                <ad-table-column ctype="address-2f" label="提车地址" prop="pickAddress"/>
                <ad-table-column width="auto"/>
              </ad-table>
            </div>
          </div>
        </div>
        <!--        订单编号-->
        <div v-else-if="isInspect">
          <div class="title-bar">
            <h2>订单编号 : {{ orderSubNo }}</h2>
            <div class="op">
              <el-button plain size="mini" type="danger" @click="goBack">回退</el-button>
              <el-button plain size="mini" type="info" @click="drawer = false">取消</el-button>
              <el-button v-if="isInWarehouse" plain size="mini" type="primary" @click="inWarehouse">入库</el-button>
              <el-button v-else plain size="mini" type="primary" @click="saveInspect">保存</el-button>
            </div>
          </div>
          <div class="content">
            <div class="left" style="min-width: 530px">
              <div class="form-wrapper assign">
                <h3>提车信息</h3>
                <el-descriptions v-if="isHasInspect" :column="2" border size="mini">
                  <el-descriptions-item label="指派结算人时间">
                    <value :model="data" prop="createTime" type="datetime"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派人">
                    <value :model="data" prop="pickUserName"/>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2" label="公司名称">
                    <value :model="data" prop="companyName"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算人">
                    <value :model="data" prop="settlementName"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算电话">
                    <value :model="data" prop="settlementPhone"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算方式">
                    <value :model="data" dictName="settlement_type" prop="settlementType"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="提车费">
                    <value :model="data" prop="pickCarFee"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派司机时间">
                    <value :model="data" prop="assignDriverTime" type="datetime"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="指派人">
                    <value :model="data" prop="pickUserName"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="司机姓名">
                    <value :model="data" prop="driverName"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="司机电话">
                    <value :model="data" prop="driverPhone"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="身份证号">
                    <value :model="data" prop="driverCardNumber"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="小板车牌">
                    <value :model="data" prop="licensePlateNumber"/>
                  </el-descriptions-item>
                </el-descriptions>
                <div v-else
                     style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
                  <div style="height:44px">
                    <img :src="noData"/>
                  </div>
                  没有提车信息
                </div>
              </div>
            </div>
            <div :style="{'border-left':'none','height':rightHeight}" class="right">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>验车信息</h3>
              </div>
              <div class="form-wrapper" style="width:100%;display: inline-block">

                <div
                  style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    车架/车牌号
                  </div>
                </div>
                <div
                  style="width:200px;display: inline-block;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding:0px 10px;">

                    <el-input v-model="inspectForm.vin" maxLength="17" placeholder="必填" size="mini"/>

                  </div>
                </div>
                <div
                  style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    公里数
                  </div>
                </div>
                <div
                  style="width:200px;display: inline-block;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding:0 10px;">
                    <el-input v-model="inspectForm.km" maxLength="10" placeholder="" size="mini"/>
                  </div>
                </div>
<!--                <div
                  style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                  <div
                    style="line-height: 30px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                    验车备注
                  </div>
                </div>
                <div
                  style="font-size: 12px;width: 100%;margin-left: 730px">
                  <div
                    style="height:30px;line-height: 30px;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                    <el-input v-model="inspectForm.remark" :rows="1" maxLength="100" size="mini" style="max-width: 600px;"
                              type="textarea"/>
                  </div>
                </div>-->

              </div>
              <div
                style="width:130px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                <div
                  style="line-height: 62px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-top:0">
                  外观及内饰验车照片
                </div>
              </div>

              <div id="lineImg" class="form-content"
                   style="margin-left: 130px;border-bottom: 1px #e3e3e3 solid;height:63px;padding-top: 1px;padding-left: 10px">
                <ad-upload ref="adimg" :images="images" multiple @input="getImgUrl"/>
              </div>
              <div
                style="width:100px;display: inline-block;background: #f5f5f5;float: left;font-size: 12px;">
                <div
                  style="height:100px;line-height: 100px;border-right:1px #e3e3e3 solid;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;">
                  验车备注
                </div>
              </div>
              <div
                style="font-size: 12px;width: 100%;margin-left: 0px">
                <div
                  style="height:100px;line-height: 100px;border-bottom: 1px #e3e3e3 solid;padding-left: 10px;padding-right: 10px;">
                  <el-input v-model="inspectForm.remark" :rows="5" maxLength="100" size="mini" style="max-width: 600px;"
                            type="textarea"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      </el-drawer>-->
    </div>
    <!--额外费用-->
    <el-dialog
      :closeOnClickModal="false"
      :show-close="true"
      :visible.sync="dialogVisible"
      class="customerFormDialog"
      title="额外费用"
      width="830px"
    >
      <outlay-manage :id="data.orderId" id="outlayManage" ref="outlayManage" :visible.sync="dialogVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="addFeeList">新 增</el-button>
              <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>

    <!--查找结算列表信息-->
    <el-dialog
      :closeOnClickModal="false"
      :show-close="true"
      :visible.sync="dialogSettlerVisible"
      class="customerFormDialog"
      title="选择结算人"
      width="730px"
    >
      <settler-manage :id="data.orderId" ref="settlerManage" :visible.sync="dialogSettlerVisible" @select="selectLink"/>
      <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="addSettlerList">新 增</el-button>
              <el-button size="small" @click="dialogSettlerVisible = false">取 消</el-button>
            </span>
    </el-dialog>

    <!--查找司机列表信息-->
    <el-dialog
      :closeOnClickModal="false"
      :show-close="true"
      :visible.sync="dialogDriverVisible"
      class="customerFormDialog"
      title="选择司机"
      width="850px"
    >
      <driver-manage :id="saveForm.companyId" ref="driverManage" :visible.sync="dialogDriverVisible"
                     @select="selectDriverLink"/>
      <span slot="footer" class="dialog-footer">
              <el-button size="small" type="primary" @click="addDriverList">新 增</el-button>
              <el-button size="small" @click="dialogDriverVisible = false">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import AdSuggestion from '@/components/AdSuggestion'
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import adTable from '@/mixins/adTable'
import Value from '@/components/AdValue'
import api, { get as waitApiGetList} from '@/api/pick/wait'
import AdUpload from '@/components/AdUpload'
import noData from '@/assets/404_images/nodata.png'
import OutlayManage from './../components/outlayManage'
import SettlerManage from '@/components/SettlerManage'
import DriverManage from '@/components/DriverManage'
import AdStatusSelect from '@/components/AdStatusSelect'
import {
  getCompanyList as getSuggestCompanyList
} from '@/api/suggestion'
import apiUser from '@/api/system/user'
import { parseStatus, parseCityCode } from '@/utils/code'
import { mapGetters } from 'vuex'

export default {
  name: 'pick-pick',
  components: {
    AdTable,
    AdTableColumn,
    AdSuggestion,
    Value,
    AdUpload,
    OutlayManage,
    AdStatusSelect,
    SettlerManage,
    DriverManage
  },
  dicts: ['pick_driver_status', 'pickcar_status', 'verifycar_status', 'pick_stock_status', 'pickcar_type', 'settlement_type', 'transport_way'],
  mixins: [adTable([
    { name: 'wait', pk: 'code' },
  ])],
  computed: {
    ...mapGetters(['allCityData'])
  },
  data () {
    return {
      selectCellRow: null,
      selectCellColumn: null,
      drawer: false,
      tempOrderId: '',
      tempVin: '',
      noData,
      siteArray: [],
      startCodeArr: [],
      destinationCodeArr: [],
      additional: true,
      isInspect: false,
      isShowDriver: false,
      rightHeight: 'calc(36vh - 37px)',
      searchQuery: {
        beginSearchTime: null,
        endSearchTime: null,
        siteId: null
      },
      tableHeight: 440,
      bottomTabHeight: 300,
      topTableData: [
        { creator: '按不出', no: 'http:www.baidu.com' }
      ],
      bottomTableData: [],
      saveForm: {
        company: '',
        companyId: null,
        pickCarFee: null,
        settlementId: null,
        settlementName: '',
        settlementPhone: '',
        settlementType: '',
        driverId: null,
        driverName: '',
        driverPhone: '',
        driverCardNumber: '',
        licensePlateNumber: ''
      },
      inspectForm: {
        specification: undefined,
        towHook: undefined,
        ashtray: undefined,
        toolkit: undefined,
        antenna: undefined,
        key: undefined,
        warningSign: undefined,
        licensePlateFrame: undefined,
        aidPacket: undefined,
        footPad: undefined,
        airPump: undefined,
        cigarLighter: undefined,
        spareTire: undefined,
        jack: undefined,
        bellCover: undefined,
        vin: undefined,
        km: undefined,
        remark: undefined,
      },
      rules: {
        // company: [
        //   {required: true, message: '必选', trigger: 'blur'},
        // ],
        // settlementName: [
        //   {required: true, message: '必选', trigger: 'blur'},
        // ],
        // settlementType: {required: true, message: '必选', trigger: 'blur'},
        // settlementPhone: [
        //   {required: true, message: '必选', trigger: 'blur'},
        // ]
      },
      inspectRules: {
        vin: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        km: [
          { required: true, message: '必填', trigger: 'blur' },
        ]
      },
      operates: {
        list: [
          {
            label: '移除',
            type: 'primary',
            icon: '',
            disabled: (index, row) => {
              return false
            },
            method: (index, row) => {
              this.del(row, index)
            }
          }
        ]
      },
      orderSubNo: '',
      data: {},
      isHasInspect: true,
      isInWarehouse: false,
      validateImages: [],
      images: [],
      dialogVisible: false,
      dialogSettlerVisible: false,
      dialogDriverVisible: false,
    }
  },
  created () {
    let self = this
    self.waitGetInitList()
    setTimeout(function () {
      // self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 145;
      self.tableHeight = document.documentElement.clientHeight - 160
      // self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35;
    })
    //获取出发地目的地
    api.getSdCodes().then(res => {
      res.data.startCodes.forEach(d => {
        self.startCodeArr.push({
          value: d,
          text: parseCityCode(self.allCityData, d)
        })
      })
      res.data.destinationCodes.forEach(d => {
        self.destinationCodeArr.push({
          value: d,
          text: parseCityCode(self.allCityData, d)
        })
      })
    })
    //获取网点信息
    this.getSiteList()
    // get().then(res => {
    //   this.topTableData = res.data
    //   this.bottomTableData = res.data
    // })

    if (this.detectZoom() == 100) {
      this.rightHeight = 'calc(36vh - 37px)'
    }
    if (this.detectZoom() == 125) {
      this.rightHeight = 'calc(36vh - 17px)'
    }
  },
  methods: {
    waitApiGetList, parseStatus, getSuggestCompanyList,
    detectZoom: function () {
      let ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase()

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
      }

      if (ratio) {
        ratio = Math.round(ratio * 100)
      }
      return ratio
    },
    //查询
    queryList: function () {
      let self = this
      self.bottomTableData = []
      self.isInspect = false
      self.additional = true
      self.waitGetInitList()
    },
    getSiteList: function () {
      let self = this
      apiUser.getSiteList().then(res => {
        self.siteArray = res.data
      })
    },
    cellClick (row, column, event) {
      console.log(row, column, '我i执行了')
      let self = this
      self.selectCellRow = { ...row }
      self.selectCellColumn = { ...column }
      self.drawer = true
      switch (column.property) {
        case 'pickCarStatus':
          if (self.isShowDriver) {
            self.bottomTableData = []
          }
          self.additional = true
          self.isShowDriver = false
          if (row.pickCarStatus == 1 || row.pickCarStatus == 2) {
            // if (self.isInspect) {
            //   self.$notify({
            //     title: '提示',
            //     message: '下方有未完成的操作，请先完成下方操作后在做此操作！',
            //     position: 'bottom-right',
            //     type: 'warning'
            //   });
            //   return
            // }
            if (row.isAdd) {
              return
            }
            if (self.bottomTableData.length == 0) {
              self.clearFrom()
            }
            self.isInspect = false
            self.bottomTableData.push(row._row ? row._row : row)
            row.isAdd = true
            // self.waitList.forEach((d, i) => {
            //   if (d.orderId == row.orderId) {
            //     self.waitList.splice(i, 1)
            //   }
            // })
          } else if (row.pickCarStatus == 4) {
            this.$confirm(`确定免费提短吗?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(() => {
              api.shortening(row.orderId).then(res => {
                if (res.code == 0) {
                  self.$notify({
                    title: '免费提短',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'success'
                  })
                  self.queryList()
                } else {
                  self.$notify({
                    title: '免费提短',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'error'
                  })
                }
              })
              // pickFree(row.id).then(() => {
              //   this.crud.refresh()
              // })
            }).catch(() => {
            })
          }
          break
        case 'driverStatus':
          if (row.driverStatus == 1) {
            self.isInspect = false
            self.additional = false
            if (!self.isShowDriver) {
              if (self.bottomTableData.length > 0) {
                self.bottomTableData.forEach(d => {
                  self.waitList.forEach(d_ => {
                    if (d.orderId == d_.orderId) {
                      d_.isAdd = false
                    }
                  })
                })
              }
            }
            self.isShowDriver = true
            self.bottomTableData = []
            self.clearFrom()
            self.bottomTableData.push(row._row ? row._row : row)
            self.saveForm.companyId = row.companyId
            self.saveForm.company = row.companyName
            self.tempOrderId = row.orderId
            self.tempVin = row.vin
            self.saveForm.settlementName = row.settlementName
            self.saveForm.settlementId = row.settlementId
            self.saveForm.settlementPhone = row.settlementPhone
            self.saveForm.settlementType = row.settlementType
            self.saveForm.pickCarFee = row.pickCarFee
          }
          break
        case 'verifyCarStatus':
          if (row.verifyCarStatus == 2) {
            self.isInWarehouse = false
            if (self.bottomTableData.length > 0) {
              self.bottomTableData.forEach(d => {
                self.waitList.forEach(d_ => {
                  if (d.orderId == d_.orderId) {
                    d_.isAdd = false
                  }
                })
              })
            }
            self.bottomTableData = []
            self.clearFrom()
            if (row.pickId) {
              self.isHasInspect = true
            } else {
              self.isHasInspect = false
            }

            console.log('row',row)
            let originRow= row._row
            self.data = originRow
            self.orderSubNo = originRow ? originRow.orderSubNo : row.orderSubNo
            self.inspectForm.specification = undefined
            self.inspectForm.towHook = undefined
            self.inspectForm.ashtray = undefined
            self.inspectForm.toolkit = undefined
            self.inspectForm.antenna = undefined
            self.inspectForm.key = undefined
            self.inspectForm.warningSign = undefined
            self.inspectForm.licensePlateFrame = undefined
            self.inspectForm.aidPacket = undefined
            self.inspectForm.footPad = undefined
            self.inspectForm.airPump = undefined
            self.inspectForm.cigarLighter = undefined
            self.inspectForm.spareTire = undefined
            self.inspectForm.jack = undefined
            self.inspectForm.bellCover = undefined
            self.inspectForm.vin = originRow ? originRow.vin : row.vin
            self.inspectForm.km = undefined
            self.inspectForm.remark = undefined
            self.isInspect = true

            if(self.$refs.adimg){
              self.$refs.adimg.images = []
            }
          }
          self.additional = false
          break
        case 'stockStatus':
          if (row.stockStatus == 1) {
            self.isInWarehouse = true
            self.isInspect = true
            if (!self.isShowDriver && self.bottomTableData.length > 0) {
              self.bottomTableData.forEach(d => {
                self.waitList.forEach(d_ => {
                  if (d.orderId == d_.orderId) {
                    d_.isAdd = false
                  }
                })
              })
            }
            self.bottomTableData = []
            self.clearFrom()
            if (row.pickId) {
              self.isHasInspect = true
            } else {
              self.isHasInspect = false
            }
            self.data = row
            self.orderSubNo = row._row ? row._row.orderSubNo : row.orderSubNo
            self.images = []
            api.gegGerifyData(row.orderId).then(res => {
              self.inspectForm.specification = res.data.specification
              self.inspectForm.towHook = res.data.towHook
              self.inspectForm.ashtray = res.data.ashtray
              self.inspectForm.toolkit = res.data.toolkit
              self.inspectForm.antenna = res.data.antenna
              self.inspectForm.key = res.data.key
              self.inspectForm.warningSign = res.data.warningSign
              self.inspectForm.licensePlateFrame = res.data.licensePlateFrame
              self.inspectForm.aidPacket = res.data.aidPacket
              self.inspectForm.footPad = res.data.footPad
              self.inspectForm.airPump = res.data.airPump
              self.inspectForm.cigarLighter = res.data.cigarLighter
              self.inspectForm.spareTire = res.data.spareTire
              self.inspectForm.jack = res.data.jack
              self.inspectForm.bellCover = res.data.bellCover
              self.inspectForm.vin = res.data.vin
              self.inspectForm.km = res.data.km
              self.inspectForm.remark = res.data.remark
              res.data.validateImages.forEach((d, i) => {
                self.images.push({
                  name: d,
                  url: d
                })
              })
              self.$refs.adimg.images = []
              self.$refs.adimg.images = self.images
            })
          }
          self.additional = false
          break
        default:
          self.data.orderId = row.orderId
          if (self.bottomTableData.length > 0) {
            self.bottomTableData.forEach(_d => {
              self.waitList.forEach(d => {
                if (d.orderId == _d.orderId) {
                  d.isAdd = false
                }
              })
            })
          }
          self.bottomTableData = []
          self.isInspect = false
          self.additional = false
      }
    },
    //计算提车费用
    clacFee: function () {
      let self = this
      let pickCarFee = 0
      self.bottomTableData.forEach(d => {
        if (!isNaN(d.pickCarFee)) {
          pickCarFee = pickCarFee + Number(d.pickCarFee)
        }
      })
      self.saveForm.pickCarFee = pickCarFee
    },
    getImgUrl: function (data) {
      let self = this
      self.validateImages = data
      console.log(data)
    },
    //移除
    del: function (row, i) {
      console.log(row, i)
      let self = this
      row.pickCarFee = null
      self.waitList.forEach(d => {
        if (d.orderId == row.orderId) {
          d.isAdd = false
        }
      })
      self.bottomTableData.forEach((d, i) => {
        if (d.orderId == row.orderId) {
          self.bottomTableData.splice(i, 1)
        }
      })
      self.clacFee()
    },
    selectLink (link) {
      let self = this
      self.dialogSettlerVisible = false
      self.saveForm.companyId = link.companyId
      self.saveForm.company = link.companyName
      self.saveForm.settlementId = link.linkmanId
      self.saveForm.settlementName = link.linkmanName
      self.saveForm.settlementPhone = link.linkmanPhone

      self.saveForm.driverId = null
      self.saveForm.driverName = ''
      self.saveForm.driverPhone = ''
      self.saveForm.driverCardNumber = ''
      self.saveForm.licensePlateNumber = ''
    },
    //选怎司机
    selectDriverLink (link) {
      let self = this
      self.dialogDriverVisible = false
      self.saveForm.driverId = link.driverId ? link.driverId : null
      self.saveForm.driverName = link.driverName
      self.saveForm.driverPhone = link.phone
      self.saveForm.driverCardNumber = link.driverCardNumber
      self.saveForm.licensePlateNumber = link.licensePlateNumber
    },
    removeLink () {
      let self = this
      self.saveForm.companyId = ''
      self.saveForm.company = ''
      self.saveForm.settlementId = ''
      self.saveForm.settlementName = ''
      self.saveForm.settlementPhone = undefined
    },
    //清空
    clearFrom: function () {
      let self = this
      self.removeLink()
      self.saveForm.pickCarFee = null
      self.saveForm.settlementType = null
      self.saveForm.driverName = ''
      self.saveForm.driverPhone = ''
      self.saveForm.driverCardNumber = ''
      self.saveForm.licensePlateNumber = ''
    },
    save () {
      let self = this
      let ajaxData = {}
      let falg = false
      if (!self.isShowDriver) {
        console.log(self.saveForm.companyId)
        if (self.saveForm.companyId == null || self.saveForm.companyId == '' || self.saveForm.settlementId == null || self.saveForm.settlementPhone == '' || self.saveForm.settlementType == '') {
          self.$notify({
            title: '提示',
            message: '请填写公司名称，结算人，联系电话以及结算方式！',
            position: 'bottom-right',
            type: 'warning'
          })
          return
        }
        self.bottomTableData.forEach(d => {
          if (d.pickCarFee == '' || d.pickCarFee == null || d.pickCarFee == undefined) {
            falg = true
          }
        })
        if (falg) {
          self.$notify({
            title: '提示',
            message: '请输入所有车的提车费！',
            position: 'bottom-right',
            type: 'warning'
          })
          return
        }
        self.$refs.saveForm.validate((valid) => {
          if (valid) {
            console.log(self.saveForm)
            // 如果有填写司机并且订单数量是一个（因为验车是单个操作，所以有这种sb需求）就询问是否进行验车，否则就走正常的逻辑
            if ( self.bottomTableData.length == 1 && self.saveForm.driverName != '' && self.saveForm.driverPhone != '') {
              console.log('有司机')
              self.$confirm('是否进行验车操作?', '提示', {
                confirmButtonText: '验车',
                cancelButtonText: '不验车',
                closeOnPressEscape: false,
                distinguishCancelAndClose: true,
                closeOnClickModal: false,
                type: 'warning'
              }).then(() => {
                console.log('验车')
                ajaxData = { ...self.saveForm }
                ajaxData.pickOrderVOList = []
                self.bottomTableData.forEach(d => {
                  ajaxData.pickOrderVOList.push(
                    {
                      orderId: d.orderId,
                      cost: d.pickCarFee
                    }
                  )
                })
                ajaxData.skipCheck = 1
                api.savePick(ajaxData).then(res => {
                  if (res.code == 0) {
                    self.$notify({
                      title: '保存',
                      message: res.msg,
                      position: 'bottom-right',
                      type: 'success'
                    })
                    self.queryList()
                    self.clearFrom()
                    self.bottomTableData = []
                    api.getWaitDetail(ajaxData.pickOrderVOList[0].orderId).then(res =>{
                      if (res.code == 0) {
                        // 等待上面的执行完成后执行cellClick方法,此处模拟点击待验车行为
                        self.selectCellRow.driverName = ajaxData.driverName
                        self.selectCellRow.driverPhone = ajaxData.driverPhone
                        self.selectCellRow.licensePlateNumber = ajaxData.licensePlateNumber
                        self.selectCellRow.driverCardNumber = ajaxData.driverCardNumber
                        self.selectCellRow.verifyCarStatus = 2
                        self.selectCellRow.driverStatus = 2
                        self.selectCellRow.pickId = true
                        self.selectCellRow.createTime = res.data.createTime
                        self.selectCellRow.pickUserName = ajaxData.pickUserName
                        self.selectCellRow.companyName = ajaxData.company
                        self.selectCellRow.settlementName = ajaxData.settlementName
                        self.selectCellRow.settlementPhone = ajaxData.settlementPhone
                        self.selectCellRow.settlementType = ajaxData.settlementType
                        self.selectCellRow.pickCarFee = ajaxData.pickCarFee
                        self.selectCellRow.assignDriverTime = res.data.assignDriverTime
                        self.selectCellRow.pickUserName = res.data.pickUserName
                        self.selectCellColumn.property = 'verifyCarStatus'
                        self.selectCellColumn.columnKey = 'verifyCarStatus'
                        self.cellClick(self.selectCellRow, self.selectCellColumn)
                        self.selectCellRow = null
                        self.selectCellColumn = null
                      }
                    })


                  } else {
                    self.$notify({
                      title: '保存',
                      message: res.msg,
                      position: 'bottom-right',
                      type: 'error'
                    })
                  }
                })
              }).catch(action => {
                if (action === 'cancel') {
                  console.log('不验车')
                  ajaxData = { ...self.saveForm }
                  ajaxData.pickOrderVOList = []
                  self.bottomTableData.forEach(d => {
                    ajaxData.pickOrderVOList.push(
                      {
                        orderId: d.orderId,
                        cost: d.pickCarFee
                      }
                    )
                  })
                  api.savePick(ajaxData).then(res => {
                    if (res.code == 0) {
                      self.$notify({
                        title: '保存',
                        message: res.msg,
                        position: 'bottom-right',
                        type: 'success'
                      })
                      self.queryList()
                      self.clearFrom()
                      self.bottomTableData = []
                    } else {
                      self.$notify({
                        title: '保存',
                        message: res.msg,
                        position: 'bottom-right',
                        type: 'error'
                      })
                    }
                  })
                } else {
                  console.log('关闭')
                }
              })
            } else {
              console.log('没有司机')
              self.$confirm('是否确定保存?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                ajaxData = { ...self.saveForm }
                ajaxData.pickOrderVOList = []
                self.bottomTableData.forEach(d => {
                  ajaxData.pickOrderVOList.push(
                    {
                      orderId: d.orderId,
                      cost: d.pickCarFee
                    }
                  )
                })
                api.savePick(ajaxData).then(res => {
                  if (res.code == 0) {
                    self.$notify({
                      title: '保存',
                      message: res.msg,
                      position: 'bottom-right',
                      type: 'success'
                    })
                    self.queryList()
                    self.clearFrom()
                    self.bottomTableData = []
                  } else {
                    self.$notify({
                      title: '保存',
                      message: res.msg,
                      position: 'bottom-right',
                      type: 'error'
                    })
                  }
                })
              }).catch(() => {

              })
            }

            // self.$confirm('是否确定保存?', '提示', {
            //   confirmButtonText: '确定',
            //   cancelButtonText: '取消',
            //   type: 'warning'
            // }).then(() => {
            //   ajaxData = {...self.saveForm};
            //   ajaxData.pickOrderVOList = [];
            //   self.bottomTableData.forEach(d => {
            //     ajaxData.pickOrderVOList.push(
            //       {
            //         orderId: d.orderId,
            //         cost: d.pickCarFee
            //       }
            //     )
            //   })
            //   api.savePick(ajaxData).then(res => {
            //     if (res.code == 0) {
            //       self.$notify({
            //         title: '保存',
            //         message: res.msg,
            //         position: 'bottom-right',
            //         type: 'success'
            //       });
            //       self.queryList();
            //       self.clearFrom();
            //       self.bottomTableData = [];
            //     } else {
            //       self.$notify({
            //         title: '保存',
            //         message: res.msg,
            //         position: 'bottom-right',
            //         type: 'error'
            //       });
            //     }
            //   })
            // }).catch(() => {
            //
            // });
          } else {
            return
          }
        })
      } else {
        if (self.saveForm.driverName == '' || self.saveForm.driverPhone == '') {
          self.$notify({
            title: '提示',
            message: '请填写司机姓名和电话！',
            position: 'bottom-right',
            type: 'warning'
          })
          return
        } else {
          self.$confirm('是否进行验车操作?', '提示', {
            confirmButtonText: '验车',
            cancelButtonText: '不验车',
            closeOnPressEscape: false,
            distinguishCancelAndClose: true,
            closeOnClickModal: false,
            type: 'warning'
          }).then(() => {
            ajaxData = { ...self.saveForm }
            self.bottomTableData.forEach(d => {
              ajaxData.orderId = d.orderId
              ajaxData.pickCarFee = d.pickCarFee
            })
            api.updataPick(ajaxData).then(async res => {
              if (res.code == 0) {
                self.$notify({
                  title: '保存',
                  message: res.msg,
                  position: 'bottom-right',
                  type: 'success'
                })
              await self.queryList()
                self.clearFrom()
                self.drawer = false
                self.bottomTableData = []
                // 等待上面的执行完成后执行cellClick方法,此处模拟点击待验车行为
                self.selectCellRow.driverName = ajaxData.driverName
                self.selectCellRow.driverPhone = ajaxData.driverPhone
                self.selectCellRow.licensePlateNumber = ajaxData.licensePlateNumber
                self.selectCellRow.driverCardNumber = ajaxData.driverCardNumber
                self.selectCellRow.verifyCarStatus = 2
                self.selectCellRow.driverStatus = 2
                self.selectCellColumn.property = 'verifyCarStatus'
                self.selectCellColumn.columnKey = 'verifyCarStatus'
                self.cellClick(self.selectCellRow, self.selectCellColumn)
                self.selectCellRow = null
                self.selectCellColumn = null
              } else {
                self.$notify({
                  title: '保存',
                  message: res.msg,
                  position: 'bottom-right',
                  type: 'error'
                })
              }
            })
          }).catch(action => {
            if (action === 'cancel') {
              ajaxData = { ...self.saveForm }
              self.bottomTableData.forEach(d => {
                ajaxData.orderId = d.orderId
                ajaxData.pickCarFee = d.pickCarFee
              })
              api.updataPick(ajaxData).then(res => {
                if (res.code == 0) {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'success'
                  })
                  self.queryList()
                  self.clearFrom()
                  self.bottomTableData = []
                } else {
                  self.$notify({
                    title: '保存',
                    message: res.msg,
                    position: 'bottom-right',
                    type: 'error'
                  })
                }
              })
            } else {
              console.log('关闭')
            }
          })
        }
      }
    },
    goBack () {
      let self = this
      self.$confirm('是否确定回退?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ajaxData = {}
        ajaxData.orderId = self.data.orderId
        api.goBackApi(ajaxData.orderId).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '提示',
              message: '回退成功！',
              position: 'bottom-right',
              type: 'success'
            })
          }
        })
      }).catch(() => {
      })
    },
    //验车保存
    saveInspect () {
      let self = this
      if (self.inspectForm.vin == null) {
        self.$notify({
          title: '保存',
          message: '车架/车牌号必填',
          position: 'bottom-right',
          type: 'warning'
        })
        return
      }
      self.$confirm('是否确定保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ajaxData = {}
        ajaxData = { ...self.inspectForm }
        ajaxData.validateImages = self.validateImages
        ajaxData.orderId = self.data.orderId
        api.verify(ajaxData).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'success'
            })
            self.queryList()
            self.inspectForm = {
              specification: undefined,
              towHook: undefined,
              ashtray: undefined,
              toolkit: undefined,
              antenna: undefined,
              key: undefined,
              warningSign: undefined,
              licensePlateFrame: undefined,
              aidPacket: undefined,
              footPad: undefined,
              airPump: undefined,
              cigarLighter: undefined,
              spareTire: undefined,
              jack: undefined,
              bellCover: undefined,
              vin: undefined,
              km: undefined,
              remark: undefined,
            }
            self.validateImages = []
            self.isInspect = false
          } else {
            self.$notify({
              title: '保存',
              message: res.msg,
              position: 'bottom-right',
              type: 'error'
            })
          }
        })
      }).catch(() => {

      })
    },
    //入库
    inWarehouse () {
      let self = this
      if (self.inspectForm.vin == null || self.inspectForm.km == null) {
        self.$notify({
          title: '保存',
          message: '车架/车牌号和公里数必填',
          position: 'bottom-right',
          type: 'warning'
        })
        return
      }
      self.$confirm('是否确定保存?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ajaxData = {}
        ajaxData = { ...self.inspectForm }
        ajaxData.validateImages = self.validateImages
        ajaxData.orderId = self.data.orderId
        api.inWarehouse(ajaxData).then(res => {
          if (res.code == 0) {
            self.$notify({
              title: '入库',
              message: res.msg,
              position: 'bottom-right',
              type: 'success'
            })
            self.queryList()
            self.inspectForm = {
              specification: undefined,
              towHook: undefined,
              ashtray: undefined,
              toolkit: undefined,
              antenna: undefined,
              key: undefined,
              warningSign: undefined,
              licensePlateFrame: undefined,
              aidPacket: undefined,
              footPad: undefined,
              airPump: undefined,
              cigarLighter: undefined,
              spareTire: undefined,
              jack: undefined,
              bellCover: undefined,
              vin: undefined,
              km: undefined,
              remark: undefined,
            }
            self.validateImages = []
            self.isInspect = false
          } else {
            self.$notify({
              title: '入库',
              message: res.msg,
              position: 'bottom-right',
              type: 'error'
            })
          }
        })
      }).catch(() => {
      })
    },
    //额外费用
    addFee: function () {
      let self = this
      self.dialogVisible = true
    },
    //新增
    addFeeList: function () {
      let self = this
      self.$refs.outlayManage.addDriver()
    },
    //新增结算人
    addSettlerList: function () {
      let self = this
      self.$refs.settlerManage.addDriver()
    },
    //新增司机
    addDriverList: function () {
      let self = this
      self.$refs.driverManage.addDriver()
    },
    //显示结算人窗口
    showGetList: function () {
      let self = this
      self.dialogSettlerVisible = true
    },
    //显示司机窗口
    showDriverList: function () {
      let self = this
      if (self.saveForm.companyId == null || self.saveForm.companyId == '') {
        self.$notify({
          title: '司机信息',
          message: '请先选择公司信息',
          position: 'bottom-right',
          type: 'warning'
        })
        return
      }
      self.dialogDriverVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.page-table {
  display: flex;
  flex: 1;
  flex-direction: column;

  .box-style {
    display: flex;
    flex: 1;
    border: 1px solid #e3e3e3;
    flex-direction: column;
  }

  .top {
    display: flex;
    flex: 1;
    border-bottom: 1px solid #4da7fa;
    flex-direction: column;

    &:after {
      content: '';
      display: block;
      height: 4px;
      background: #4da7fa;
      opacity: 0.2;
    }

    .table-wrapper {
      flex: 1;
    }

    .table {
      flex: 1;
    }
  }

  .bottom {
    //display: flex;
    position: fixed;
    bottom: 0;
    height: 36vh;
    width: 98vw;
    z-index: 999;
    background-color: #fff;
    //flex-direction: column;

    .title-bar {
      display: flex;
      line-height: 36px;
      background: #f5f5f5;
      border-bottom: 1px solid #e3e3e3;
      padding-left: 10px;
      flex-shrink: 0;

      .op {
        margin-left: auto;
        margin-right: 12px;
      }
    }

    .content {
      display: flex;
      flex: 1;
      overflow: hidden;

      .left {
        display: flex;

        &:after {
          content: '';
          display: block;
          width: 3px;
          background: #4da7fa;
          opacity: 0.2;
        }
      }

      .middle {
        display: flex;
      }

      .right {
        flex: 1;
        overflow: hidden;

        .table-wrapper {
          height: 100%;
        }
      }

      .form-wrapper {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 18vw;

        h3 {
          height: 35px;
          box-sizing: border-box;
        }

        .form-content {
          padding: 10px 10px 0 10px;
          box-sizing: border-box;
          overflow-y: auto;

          .el-form-item {
            margin-bottom: 10px;
          }
        }
      }
    }
  }

  .bottom {
    & > .title-bar {
      padding-left: 16px;
      border-bottom: 1px solid #bdd0e3;
      background: #f5f5f5;
      align-items: center;
    }

    h2 {
      font-size: 12px;
    }

    h3 {
      padding-left: 10px;
      border-bottom: 1px solid #e3e3e3;
      background: #f5f5f5;
      line-height: 30px;
      font-size: 12px;
    }

    //.left h3 { border-right: 1px solid #e3e3e3; }
    //.middle h3 { border-left: 1px solid #e3e3e3; }
    .right {
      border-left: 1px solid #e3e3e3;
    }
  }
}
</style>